<template>
  <div class="settled combground">
    <div class="container">
      <div class="comtitle">
        <h2 class="comh2">入驻企业</h2>
      </div>
      <div class="top-btns">
        <m-button
          width="235"
          :type="chosenCompany === 1 ? 'filled' : 'bordered'"
          style="margin-right: 15px"
          @click="chooseCompany(1)"
        >
          已入驻企业
        </m-button>
        <m-button
          width="235"
          :type="chosenCompany === 0 ? 'filled' : 'bordered'"
          @click="chooseCompany(0)"
        >
          待入驻企业
        </m-button>
      </div>

      <div class="content">
        <div v-if="chosenCompany === 1">
          <h4>请选择您需要筛选的条件：</h4>
          <div class="form-wrap">
            <m-form
              class="form"
              ref="form"
              :model="formData"
              :inline="true"
              label-width="118px"
              label-position="right"
            >
              <m-form-item label="产品类型：" prop="mer_type">
                <m-select
                  :options="typeOptions"
                  v-model="formData.mer_type"
                  type="grey"
                  width="160"
                />
              </m-form-item>
              <m-form-item label="一级分类：" prop="cate_id">
                <m-select
                  :options="cateOptions"
                  v-model="formData.cate_id"
                  type="grey"
                  width="160"
                />
              </m-form-item>
              <m-form-item label="Packmate认证：" prop="zbz">
                <m-select
                  :options="zbzOptions"
                  v-model="formData.zbz"
                  type="grey"
                  width="160"
                />
              </m-form-item>
              <m-form-item label="企业所在地：" prop="country">
                <v-distpicker
                  class="addressChoose"
                  @province="onChangeProvince"
                  :province="formData.province"
                  @city="onChangecity"
                  :city="formData.city"
                  @area="onChangeArea"
                  :area="formData.area"
                  :placeholders="placeholders"
                ></v-distpicker>
              </m-form-item>

              <m-form-item :label="qualitys.name" prop="quality" style="display: block">
                <radio-group v-model="formData.quality">
                  <m-radio v-for="item in qualitys.qualification" :key="item.id" :label="item.name" />
                </radio-group>
              </m-form-item>
              <m-form-item :label="environments.name" prop="environment" style="display: block">
                <radio-group v-model="formData.environment">
                  <m-radio v-for="item in environments.qualification" :key="item.id" :label="item.name" />
                </radio-group>
              </m-form-item>
              <m-form-item :label="societys.name" prop="society" style="display: block">
                <radio-group v-model="formData.society">
                  <m-radio v-for="item in societys.qualification" :key="item.id" :label="item.name" />
                </radio-group>
              </m-form-item>
              <m-form-item :label="healths.name" prop="health" style="display: block">
                <radio-group v-model="formData.health">
                  <m-radio v-for="item in healths.qualification" :key="item.id" :label="item.name" />
                </radio-group>
              </m-form-item>
              <m-form-item :label="environmentAuths.name" prop="environmentAuth" style="display: block">
                <radio-group v-model="formData.environmentAuth">
                  <m-radio v-for="item in environmentAuths.qualification" :key="item.id" :label="item.name" />
                </radio-group>
              </m-form-item>
              <m-form-item style="display: block; margin-left: 40px; margin-left: 200px">
                <div style="display: flex">
                  <m-button
                    class="resetbtn"
                    width="110"
                    style="margin-right: 15px"
                    @click="reset"
                    >重置</m-button>
                  <m-button width="110" @click="handleScreen">筛选</m-button>
                </div>
              </m-form-item>
            </m-form>
            <div class="liner" />
            <m-searchbar
              v-model.trim="keywords"
              style="margin-top: 25px"
              placeholder="搜索企业"
              @click-search="search"
            />
          </div>
        </div>

        <div class="list-wrap">
          <template v-if="chosenCompany === 1">
            <div
              class="item had-settled-item"
              v-for="(item, index) in list"
              :key="index"
              @click="goNotSettled(item.mer_id)"
            >
              <div class="pic-wrap">
                <img :src="item.mer_avatar" alt="" />
                <div class="mask">{{ item.mer_info }}</div>
              </div>
              <div class="name textOverflow2">
                {{ item.mer_name || "--" }}
              </div>
              <div class="auth-area">
                <div class="top">
                  <div class="top-item">
                    <img src="~/assets/images/settle.png" alt="" />
                    入驻 {{item.settle_time || '--' }}
                  </div>
                  <div
                    class="top-item"
                    style="margin-left: 30px"
                    :style="{ color: item.packmate === 1 ? '#e48b2c' : '#999' }"
                  >
                    <img
                      v-if="item.packmate === 0"
                      src="~/assets/images/not_certified.png"
                      alt=""
                    />
                    <img
                      v-if="item.packmate === 1"
                      src="~/assets/images/verified.png"
                      alt=""
                    />
                    {{ item.packmate === 1 ? "已认证" : "未认证" }}
                  </div>
                </div>
                <div class="bottom">
                  <div class="bottom-item">
                    <img src="~/assets/images/service-enterprise.png" alt="" />
                    {{ item.mer_keyword }}
                  </div>
                  <div class="btns" @click.stop>
                    <m-button
                      class="tagCopy"
                      size="mini"
                      v-clipboard:copy="url"
                      v-clipboard:success="onCopy"
                      v-clipboard:error="onError"
                      type="borderedLight"
                      style="margin-right: 5px"
                    >
                      <div style="display: flex; align-items: center; font-size: 10px">
                        <img
                          src="~/assets/images/share.png"
                          alt=""
                          style="width: 10px; height: 10px; margin-right: 5px"
                        />
                        分享
                      </div>
                    </m-button>
                    <m-button
                      size="mini"
                      type="borderedLight"
                      @click.stop="handleCollection(item)"
                    >
                      <div style="display: flex; align-items: center; font-size: 10px">
                        <van-icon
                          style="margin-right: 5px"
                          v-if="!Boolean(item.is_hide_mer)"
                          name="like-o"
                          size="13"
                        />
                        <van-icon
                          v-else
                          style="margin-right: 5px"
                          name="like"
                          color="#E38B2B"
                          size="13"
                        />
                        {{ item.is_hide_mer == 1 ? "已收藏" : "收藏" }}
                      </div>
                    </m-button>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template v-if="chosenCompany === 0">
            <div
              class="item not-settled-item"
              v-for="(item, index) in list"
              :key="index"
              @click="goNotSettled(item.mer_id)"
            >
              <div class="pic-wrap">
                <img :src="item.mer_avatar" alt="" />
                <div class="mask">{{ item.mer_info }}</div>
              </div>
              <div class="name textOverflow2">{{ item.mer_name }}</div>
              <div class="auth-area">
                <div class="top">
                  <div class="top-item" style="color: #999999">
                    <img src="~/assets/images/not_certified.png" alt="" />未认证
                  </div>
                  <div
                    class="top-item"
                    style="color: #e48b2c;margin-left: 10px;"
                    @click.stop="showTips = true"
                  >
                    <img src="~/assets/images/customer-service.png" alt="" />联系平台入驻
                  </div>
                </div>
              </div>
              <div class="btn-invite" @click.stop="invite(item.mer_id)">邀请入驻</div>
            </div>
          </template>
          <nodata message="暂无企业" :status="listStatus"></nodata>
          <div style="padding: 0 15px; margin-top: 30px">
            <m-pagination
              :pagination="total"
              :page-size="limit"
              @changePage="changeThisPage"
            />
          </div>
        </div>
      </div>
    </div>

    <m-dialog class="dialog" :show-dialog.sync="showDialog" title="邀请入驻">
      <m-form :model="inviteFormData" label-width="130px" label-position="right">
        <m-form-item label="受邀人邮箱：" required>
          <m-input v-model="inviteFormData.email" placeholder="请输入邀请企业邮箱地址" />
        </m-form-item>
        <m-form-item label="邀请内容：" required>
          <m-input
            v-model="inviteFormData.content"
            type="textarea"
            placeholder="请输入邀请内容详情"
            :rows="3"
          />
        </m-form-item>
      </m-form>
      <div class="btns">
        <m-button type="dark" width="180" @click="cancel">取消</m-button>
        <m-button width="180" @click="inviteConfirm">确定</m-button>
      </div>
    </m-dialog>

    <m-dialog
      class="tipsDialog"
      :show-dialog.sync="showTips"
      title="平台提示"
      width="520px"
    >
      <div class="tips">您可以通过多种方式联系找包装网入驻平台：</div>
      <div class="contacts">
        <div class="qr">
          <img src="~/assets/images/qr.jpg" alt="" />
          <p>扫码添加微信客服</p>
        </div>
        <div class="online">
          <img src="~/assets/images/customer-service.jpg" alt="" />
          <p>在线客服</p>
        </div>
        <div class="contact-type">
          <p class="title">电话/邮箱联系方式</p>
          <p class="phone">
            <img src="~/assets/images/phone-grey.png" alt="" />
            电话：021-225522255
          </p>
          <p class="email">
            <img src="~/assets/images/email-grey.png" alt="" />
            邮箱：225522255@163.com
          </p>
        </div>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import MForm from "@/components/common/m-form/MForm"
import MFormItem from "@/components/common/m-form/MFormItem"
import MSelect from "@/components/common/m-select/MSelect"
import MButton from "@/components/common/m-button/MButton"
import MPagination from "@/components/common/m-pagination/MPagination"
import MDialog from "@/components/common/m-dialog/MDialog"
import { RadioGroup } from "element-ui"
import MRadio from "@/components/common/m-radio/MRadio"
import MInput from "@/components/common/m-input/MInput"
import MSearchbar from "@/components/m-searchbar/MSearchbar"
import { Icon } from "vant"
import Vue from "vue"
Vue.use(Icon)

import {
  getMerchantList,
  getProductsCategory,
  inviteMerchant,
  getCollection,
  enterprise_cateApi
} from "@/request/api"
export default {
  name: "Settled",
  components: {
    MSearchbar,
    MInput,
    MRadio,
    MDialog,
    MPagination,
    MButton,
    MSelect,
    MFormItem,
    MForm,
    RadioGroup
  },
  data() {
    return {
      is_collect: false,
      chosenCompany: 1,
      showDialog: false,
      showTips: false,
      placeholders: {
        province: "省",
        city: "市",
        area: "区"
      },
      formData: {
        cate_id: "",
        mer_type: 2,
        province: "",
        city: "",
        area: "",
        health: "",
        environmentAuth: ""
      },
      typeOptions: [
        {
          label: "不限",
          value: 2
        },
        {
          label: "包装分类",
          value: 0
        },
        {
          label: "产业服务",
          value: 1
        }
      ],
      cateOptions: [],
      zbzOptions: [
        {
          label: "已认证",
          value: 1
        },
        {
          label: "未认证",
          value: 2
        }
      ],
      list: [],
      page: 1,
      listStatus: 1,
      total: 0,
      limit: 16,
      keywords: "",
      inviteFormData: {},
      inviteId: "",
      url: window.location.href,
      qualitys:{},
      environments:{},
      societys:{},
      healths:{},
      environmentAuths: {}
    }
  },
  watch: {
    "formData.mer_type"(val) {
      if (val === 2) {
        this.formData.cate_id = ""
        this.formData.cateOptions = []
      } else {
        this.getCate()
      }
    },
    chosenCompany(val) {
      if (val === 2) {
        this.showTips = true
      }
    }
  },
  created() {
    this.getList()
    this.getEnterpriseList()
  },
  methods: {
    getList() {
      this.listStatus = 1
      this.list = []
      let data = {
        limit: this.limit,
        page: this.page,
        mer_type: this.formData.mer_type, // 产品类型
        cate_id: this.formData.cate_id, // 一级分类
        zbz: "", // PackMate认证
        province: this.formData.province,
        city: this.formData.city,
        county: this.formData.area,
        auth: "",
        state: this.chosenCompany,
        keyword: this.keywords // 搜索企业
      }
      getMerchantList(data).then((res) => {
        this.list = res.data.data
        this.total = res.data.total
        if (this.total === 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({top: 0})
      })
    },
    /** 获取资质认证筛选条件 */
    async getEnterpriseList() {
      const res = await enterprise_cateApi();
      try {
        if(res.status !== 200) return this.$message.error(res.message)
        this.qualitys = res.data[0];
        this.environments = res.data[1]
        this.societys = res.data[2]
        this.healths = res.data[3]
        this.environmentAuths = res.data[4]
      }catch(err) {
        this.$message.error(err.message)
      }
      
    },
    // 筛选入驻企业
    handleScreen() {
      this.getList()
    },
    inviteConfirm() {
      inviteMerchant({ ...this.inviteFormData, id: this.inviteId }).then(() => {
        this.showDialog = false
        this.$toastVant.success("邀请成功!")
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    onChangeProvince(e) {
      if (e.value === "省") {
        this.formData.province = ""
      } else {
        this.formData.province = e.value
      }
    },
    onChangeArea(e) {
      if (e.value === "区") {
        this.formData.area = ""
      } else {
        this.formData.area = e.value
      }
    },
    onChangecity(e) {
      if (e.value === "市") {
        this.formData.city = ""
      } else {
        this.formData.city = e.value
      }
    },
    getCate() {
      let that = this
      if (this.formData.mer_type === 2) {
        this.cateOptions = []
        return false
      } else {
        let type = ""
        if (this.formData.mer_type === 1) {
          type = 0
        } else if (this.formData.mer_type === 0) {
          type = 1
        }
        let data = {
          is_entity: type,
          page: 1,
          limit: 0,
          pid: 0,
          num: 0
        }
        getProductsCategory(data).then((res) => {
          that.cateOptions = []
          for (var i in res.data.data) {
            let tem = {
              label: res.data.data[i].cate_name,
              value: res.data.data[i].id
            }
            that.cateOptions.push(tem)
          }
          that.formData.cate_id = ""
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    },
    onCopy() {
      this.$toastVant.success("分享链接复制成功")
    },
    onError() {
      this.$message.error("抱歉，复制失败！")
    },
    // 收藏产品
    handleCollection(item) {
      if (!this.$store.state.hasLogin) {
        setTimeout(() => {
          this.$toastVant({
            message: "登录后才可使用收藏和购物车功能",
            duration: 3000,
            forbidClick: true
          })
          this.$router.push({ name: "Login" })
        })
      } else {
        const params = {
          type_id: item.mer_id,
          type: 10
        }
        getCollection(params).then((res) => {
            if (res.status === 200) {
              this.$toastVant.success(res.message)
              this.list.forEach(r => {
                if(r.mer_id === item.mer_id) {
                  item.is_hide_mer === 0 ? item.is_hide_mer = 1 : item.is_hide_mer = 0
                }
              })
            }else {
              this.$message.error(res.message)
            }
          }).catch((err) => {
            this.$toastVant.fail(err.message)
          })
      }
    },
    changeThisPage(page) {
      this.page = page
      this.getList()
    },
    chooseCompany(index) {
      this.chosenCompany = index
      const data = {
        limit: this.limit,
        page: 1,
        settle: index
      }
      getMerchantList(data).then((res) => {
        this.list = res.data.data
        this.total = res.data.total
        if (this.total === 0) {
          this.listStatus = 0
        } else {
          this.listStatus = 2
        }
        window.scrollTo({top: 0})
      })
    },
    reset() {
      this.$refs["form"].$refs["mForm"].resetFields()
      this.formData = {}
      this.getList()
    },
    invite(id) {
      this.inviteId = id
      this.showDialog = true
    },
    cancel() {
      this.showDialog = false
    },
    toCompanyHomePage(id) {
      let { href } = this.$router.resolve({
        name: "CompanyHomeHome",
        params: {id}
      })
      window.open(href, "_blank")
    },
    goNotSettled(id) {
      if(this.chosenCompany === 0) {
        let { href } = this.$router.resolve({
          path: "/company-home/noSettled/" + id
        })
        window.open(href, "_blank")
      } else {
        let { href } = this.$router.resolve({
          name: "CompanyHomeHome",
          params: {id}
        })
        window.open(href, "_blank")
      }
    },
    search() {
      if (!this.keywords) {
        this.$message.warning("请输入关键词！")
        return
      }
      this.$router.push({
        name: "SearchCompany",
        params: {keyword: this.keywords},
        query: {t: Date.now()}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";

/deep/ .resetbtn .el-button {
  border: 1px solid #979797 !important;
  border-radius: 10px;
  border: solid 1px #666666;
  background: #fff !important;
  color: #666666 !important;
}
/deep/ .el-form-item__label {
  font-size: 13px !important;
}
/deep/ .el-button--mini {
  padding: 4px 6px;
}

/deep/ .el-radio {
  width: 100px !important;
}

/deep/ .distpicker-address-wrapper select {
  height: 45px;
  background-color: #f3f4f6;
  border: solid 1px #eaeaea;
  border-radius: 10px;
  width: 160px;
  margin-right: 10px;
}

.settled {
  padding: 60px 0 80px 0;

  .top-btns {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    position: relative;
  }

  .content {
    width: 100%;
    padding: 25px 30px;
    color: #656565;
    background: #fff;
    margin-top: 50px;
    font-size: 16px;

    .form-wrap {
      margin-top: 40px;
      display: flex;
      margin-bottom: 40px;

      .form {
        flex: 1;
      }
      .liner {
        height: 100px;
        width: 1px;
        background: #ccc;
        margin-right: 20px;
      }

      .searchbar-area {
        width: 297px;
        height: 118px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-left: solid 1px #eaeaea;
      }
    }

    .list-wrap {
      .item {
        width: 23.6%;
        padding: 15px 10px;
        border: solid 1px rgb(236, 236, 237);
        background-color: rgb(243, 244, 247);
        display: inline-block;
        margin: 7.5px;
        cursor: pointer;

        &:hover {
          .pic-wrap > .mask {
            visibility: visible;
            padding: 10px;
          }
        }

        .pic-wrap {
          height: 150px;
          margin-bottom: 15px;
          position: relative;

          > img {
            width: 100%;
            height: 100%;
          }

          .mask {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 16px;
            visibility: hidden;
          }
        }

        .name {
          margin-bottom: 15px;
          font-size: 18px;
          text-overflow:ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }

        .auth-area {
          .top {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            .top-item {
              display: flex;
              align-items: center;
              font-size: 14px;

              img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
              }
            }
          }

          .bottom {
            position: relative;
            display: flex;
            align-items: center;

            .bottom-item {
              display: flex;
              align-items: center;
              font-size: 14px;
            }

            img {
              width: 18px;
              height: 20px;
              margin-right: 5px;
            }

            .btns {
              display: flex;
              margin-left: 10px;
              position: absolute;
              bottom: 0;
              left: 95px;
            }
          }
        }
      }

      .not-settled-item {
        position: relative;

        .auth-area {
          margin-bottom: 40px;
        }

        .btn-invite {
          height: 34px;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: $theme-color-1;
          color: #fff;
          line-height: 34px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }

  .dialog {
    .btns {
      display: flex;
      justify-content: space-around;
      margin-top: 30px;
    }
  }

  .tipsDialog {
    .tips {
      margin-bottom: 30px;
    }

    .contacts {
      display: flex;
      margin-bottom: 15px;

      .qr,
      .online {
        display: inline-block;

        p {
          text-align: center;
        }
      }

      .qr,
      .online {
        margin-right: 20px;
      }

      .contact-type {
        display: inline-block;

        .title,
        .phone {
          margin-bottom: 15px;
        }

        p {
          display: flex;
          align-items: center;

          img {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

/deep/ .el-form {
  .el-form-item {
    margin-bottom: 12px !important;
  }
}

.heart {
  width: 12px;
  height: 10px;
  display: inline-block;
  background-size: 30px;
  background: url("../../assets/images/shoucanglogo.png") -2px -3px;
  margin-right: 3px;
}
</style>
